<template>
  <div class="hello">
    <div class="main">
      <img :src="currentImg" />
      <ul>
        <li v-for="(item,index) in allImages" :class="[index==currentIndex ? 'on':'']" :key="item"
          @click="changeImg(index)">
          {{index+1}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      currentIndex: 0,
      currentImg: '',
      allImages:[
        require('../assets/images/1.jpg'),
        require('../assets/images/2.jpg'),
        require('../assets/images/3.jpg'),
        require('../assets/images/4.jpg')
      ]
    }
  },
  props: {
    msg: String
  },
  mounted(){
    this.currentImg = this.allImages[0];
    // 自动轮播
    this.autoPlay()
  },
  methods:{
    autoPlay(){
      let interId = setInterval(()=>{
        // 隔两秒换一张图片
        this.currentIndex++;
        if(this.currentIndex>this.allImages.length-1){
          this.currentIndex = 0;
        }
        this.currentImg = this.allImages[this.currentIndex]
      },3000)
    },
    changeImg(index){
      console.log('改变--',index)
      this.currentIndex = index;
      this.currentImg = this.allImages[index];
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
  height: 300px;
  background-color: purple;
  position: relative;
}
.main img{
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.main ul{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.4);
}
.main li{float: left; padding: 0 10px; cursor: pointer; line-height: 25px; color: #ccc;}
.main li.on{color: #fff}
</style>
